[V0_FILE]typescriptreact:file="components/service-card.tsx" isEdit="true" isMerged="true" import { Code, PenTool, Layers } from "lucide-react" import Link from "next/link" interface ServiceCardProps { icon: "code" | "tool" | "layers" title: string description: string color: "blue" | "purple" | "amber" } export default function ServiceCard({ icon, title, description, color }: ServiceCardProps) { const getIcon = () => { switch (icon) { case "code": return

      case "tool":
        return 
      case "layers":
        return 
      default:
        return null
    }
  }

  const getIconColor = () => {
    switch (color) {
      case "blue":
        return "bg-gradient-to-br from-cyan-500 to-blue-600 text-white"
      case "purple":
        return "bg-gradient-to-br from-purple-500 to-indigo-600 text-white"
      case "amber":
        return "bg-gradient-to-br from-amber-500 to-orange-600 text-white"
      default:
        return "bg-gradient-to-br from-gray-500 to-gray-600 text-white"
    }
  }

  const getTextColor = () => {
    switch (color) {
      case "blue":
        return "text-cyan-400 hover:text-cyan-300"
      case "purple":
        return "text-purple-400 hover:text-purple-300"
      case "amber":
        return "text-amber-400 hover:text-amber-300"
      default:
        return "text-gray-400 hover:text-gray-300"
    }
  }

  const getTitleGradient = () => {
    switch (color) {
      case "blue":
        return "from-cyan-400 to-blue-500"
      case "purple":
        return "from-purple-400 to-indigo-500"
      case "amber":
        return "from-amber-400 to-orange-500"
      default:
        return "from-gray-400 to-gray-500"
    }
  }

  return (
    
      {getIcon()}

      
        {title}
      

      {description}

      
        Learn more →
      
    
  )
}

[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;
}

body {
  @apply bg-black text-white;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(100, 100, 100, 0.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 100, 100, 0.6);
}

/* Gradient text animation */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

/* Floating animation for labels */
@keyframes float-slow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes float-medium {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes float-fast {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}

.animate-float-medium {
  animation: float-medium 5s ease-in-out infinite;
}

.animate-float-fast {
  animation: float-fast 4s ease-in-out infinite;
}

/* Text glow effects */
.text-glow {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.1);
}

.text-glow-cyan {
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.7), 0 0 20px rgba(6, 182, 212, 0.5), 0 0 30px rgba(6, 182, 212, 0.3);
  animation: pulse-glow-cyan 3s ease-in-out infinite alternate;
}

.text-glow-purple {
  text-shadow: 0 0 10px rgba(147, 51, 234, 0.7), 0 0 20px rgba(147, 51, 234, 0.5), 0 0 30px rgba(147, 51, 234, 0.3);
  animation: pulse-glow-purple 4s ease-in-out infinite alternate;
}

.text-glow-amber {
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.7), 0 0 20px rgba(245, 158, 11, 0.5), 0 0 30px rgba(245, 158, 11, 0.3);
  animation: pulse-glow-amber 3.5s ease-in-out infinite alternate;
}

/* Pulsing glow animations */
@keyframes pulse-glow-cyan {
  0% {
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.7), 0 0 20px rgba(6, 182, 212, 0.5), 0 0 30px rgba(6, 182, 212, 0.3);
  }
  100% {
    text-shadow: 0 0 15px rgba(6, 182, 212, 0.9), 0 0 25px rgba(6, 182, 212, 0.7), 0 0 35px rgba(6, 182, 212, 0.5);
  }
}

@keyframes pulse-glow-purple {
  0% {
    text-shadow: 0 0 10px rgba(147, 51, 234, 0.7), 0 0 20px rgba(147, 51, 234, 0.5), 0 0 30px rgba(147, 51, 234, 0.3);
  }
  100% {
    text-shadow: 0 0 15px rgba(147, 51, 234, 0.9), 0 0 25px rgba(147, 51, 234, 0.7), 0 0 35px rgba(147, 51, 234, 0.5);
  }
}

@keyframes pulse-glow-amber {
  0% {
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.7), 0 0 20px rgba(245, 158, 11, 0.5), 0 0 30px rgba(245, 158, 11, 0.3);
  }
  100% {
    text-shadow: 0 0 15px rgba(245, 158, 11, 0.9), 0 0 25px rgba(245, 158, 11, 0.7), 0 0 35px rgba(245, 158, 11, 0.5);
  }
}

[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config

[V0_FILE]typescriptreact:file="components/hexagon-background.tsx" isEdit="true" isMerged="true"
export function HexagonBackground() {
  return (
    
      
    
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import HexagonalObject from "@/components/hexagonal-object"
import ServiceCard from "@/components/service-card"
import { NavBar } from "@/components/nav-bar"
import { HexagonBackground } from "@/components/hexagon-background"

export default function Home() {
  return (
    
      {/* Navigation */}
      

      {/* Hero Section */}
      
        
          
            
              
                Elevate developers.
                

                Craft excellence.
              
            
            
              We help innovative companies create exceptional developer experiences. We build developer tools, APIs, and
              frameworks for the modern tech ecosystem.
            

            
              TRUSTED BY TECH LEADERS
              
                
                  
                
                
                  
                
                
                  
                
              
            

            
              
              
                
              
            
          

          
            
              
            
          
        

        {/* Background gradients */}
        
          
          
          
        

        {/* Hexagon background pattern */}
        
      

      {/* Services Section */}
      
        
          
            Our solutions
          
        

        
          

          

          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/hexagonal-object.tsx" isEdit="true"
"use client"

import { useRef, useMemo, useEffect } from "react"
import { Canvas, useFrame } from "@react-three/fiber"
import { OrbitControls, PerspectiveCamera, Environment } from "@react-three/drei"
import * as THREE from "three"

// Component for the spotlight effect on text labels
function TextSpotlight({ position, color, intensity = 2, distance = 10 }) {
  const spotlightRef = useRef(null)

  // Uncomment for debugging the spotlight position
  // useHelper(spotlightRef, THREE.SpotLightHelper, "white")

  useFrame(({ clock }) => {
    if (spotlightRef.current) {
      // Add subtle movement to the spotlight
      spotlightRef.current.position.x = position[0] + Math.sin(clock.getElapsedTime() * 0.5) * 0.5
      spotlightRef.current.position.y = position[1] + Math.cos(clock.getElapsedTime() * 0.3) * 0.3
    }
  })

  return (
    
  )
}

function HexagonalCluster() {
  const groupRef = useRef(null)

  // Create a more complex rotation animation
  useFrame(({ clock }) => {
    if (groupRef.current) {
      groupRef.current.rotation.y = clock.getElapsedTime() * 0.2
      groupRef.current.rotation.x = Math.sin(clock.getElapsedTime() * 0.1) * 0.1
    }
  })

  // Define colors with more accurate hex values from the website
  const colors = useMemo(
    () => ({
      cyan: "#00c6d0",
      purple: "#8338ec",
      amber: "#fb5607",
      darkPurple: "#3a0ca3",
      teal: "#06d6a0",
    }),
    [],
  )

  // Create a hexagon geometry that we'll reuse
  const hexGeometry = useMemo(() => new THREE.CylinderGeometry(1, 1, 0.2, 6, 1), [])

  // Create materials with better visual properties
  const materials = useMemo(() => {
    return {
      cyan: new THREE.MeshPhysicalMaterial({
        color: colors.cyan,
        metalness: 0.9,
        roughness: 0.1,
        clearcoat: 0.5,
        clearcoatRoughness: 0.1,
        emissive: new THREE.Color(colors.cyan).multiplyScalar(0.2),
      }),
      purple: new THREE.MeshPhysicalMaterial({
        color: colors.purple,
        metalness: 0.8,
        roughness: 0.2,
        clearcoat: 0.3,
        clearcoatRoughness: 0.2,
        emissive: new THREE.Color(colors.purple).multiplyScalar(0.2),
      }),
      amber: new THREE.MeshPhysicalMaterial({
        color: colors.amber,
        metalness: 0.7,
        roughness: 0.3,
        clearcoat: 0.4,
        clearcoatRoughness: 0.3,
        emissive: new THREE.Color(colors.amber).multiplyScalar(0.2),
      }),
      darkPurple: new THREE.MeshPhysicalMaterial({
        color: colors.darkPurple,
        metalness: 0.9,
        roughness: 0.1,
        clearcoat: 0.5,
        clearcoatRoughness: 0.1,
        emissive: new THREE.Color(colors.darkPurple).multiplyScalar(0.2),
      }),
      teal: new THREE.MeshPhysicalMaterial({
        color: colors.teal,
        metalness: 0.8,
        roughness: 0.2,
        clearcoat: 0.4,
        clearcoatRoughness: 0.2,
        emissive: new THREE.Color(colors.teal).multiplyScalar(0.2),
      }),
    }
  }, [colors])

  // Define hexagon positions in a more structured way
  const hexagons = useMemo(
    () => [
      { position: [0, 0, 0], rotation: [Math.PI / 2, 0, 0], scale: 1, material: materials.cyan },
      { position: [1.5, 0.5, 0.5], rotation: [Math.PI / 2, Math.PI / 3, 0], scale: 0.8, material: materials.purple },
      { position: [-1.2, -0.7, 0.8], rotation: [Math.PI / 2, Math.PI / 6, 0], scale: 0.7, material: materials.amber },
      {
        position: [0.8, -1.2, -0.5],
        rotation: [Math.PI / 2, Math.PI / 4, 0],
        scale: 0.9,
        material: materials.darkPurple,
      },
      { position: [-0.7, 1.1, -0.9], rotation: [Math.PI / 2, Math.PI / 5, 0], scale: 0.75, material: materials.teal },
      { position: [0.5, 0.8, 1.5], rotation: [Math.PI / 2, Math.PI / 2.5, 0], scale: 0.65, material: materials.cyan },
      {
        position: [-1.5, 0.3, -0.5],
        rotation: [Math.PI / 2, Math.PI / 1.5, 0],
        scale: 0.7,
        material: materials.purple,
      },
      { position: [1.2, -0.5, 1.2], rotation: [Math.PI / 2, Math.PI / 3.5, 0], scale: 0.6, material: materials.amber },
    ],
    [materials],
  )

  return (
    
      {hexagons.map((hex, index) => (
        
      ))}
    
  )
}

export default function HexagonalObject() {
  // Clean up materials and geometries on unmount to prevent memory leaks
  useEffect(() => {
    return () => {
      // This will run when the component unmounts
    }
  }, [])

  return (
    
      {/* Floating labels with glow effects */}
      
        
        
          API'S
        
      
      
        
        
          INNOVATION
        
      
      
        
        
          DEV TOOLS
        
      

      
    
  )
}

[V0_FILE]typescriptreact:file="components/nav-bar.tsx" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Github, ChevronDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export function NavBar() {
  const [isScrolled, setIsScrolled] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 10) {
        setIsScrolled(true)
      } else {
        setIsScrolled(false)
      }
    }

    window.addEventListener("scroll", handleScroll)
    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  }, [])

  return (
    
      
        
          
            
              
                
                
                  
                
              
              
                HEXADEV
              
            
          

          
            

            
              Innovation Lab
            

            

            
              Blog
            

            
          

          
            
              
              28.5k
            
            
          
        
      
    
  )
}

interface NavDropdownProps {
  title: string
  items: { label: string; href: string }[]
}

function NavDropdown({ title, items }: NavDropdownProps) {
  return (
    
      
        
      
      
        {items.map((item, index) => (
          
            
              {item.label}
            
          
        ))}
      
    
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true"
import type React from "react"
import "./globals.css"
import { Inter } from "next/font/google"
import { ThemeProvider } from "@/components/theme-provider"
import type { Metadata } from "next"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "HexaDev - Elevate developers. Craft excellence.",
  description:
    "We help innovative companies create exceptional developer experiences. We build developer tools, APIs, and frameworks for the modern tech ecosystem.",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
          {children}
        
      
    
  )
}
About

Tags

Share

More from chinpeerapat

More Templates Like This

About

Tags

Share

About

Tags

Share

More from chinpeerapat

More Templates Like This
